<template>
    <div class="article-card" v-for="item in articles" key="item.id">
        <h3 class="article-title">{{ item.title }}</h3>
        <p class="article-content">{{ item.content }}</p>
        <hr>
        <div class="article-info">
            <span class="article-author">{{ item.author }}</span>
            <span class="article-date">{{ item.date }}</span>
            <span class="article-time">{{ item.time }}</span>
        </div>
    </div>
</template>

<script setup>
import { getArticleApi } from '@/api/index';
import { ref } from 'vue';

const articles = ref([])
const getArticles = async () => {
    articles.value = await getArticleApi()
}
getArticles()
</script>

<style lang="scss" scoped>
.article-card {
    width: 740px;
    height: 120px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px 1px #fa709a;
    margin: 20px auto;

    .article-title {
        font-size: 24px;

    }

    .article-content {
        font-size: 14px;
        margin: 20px auto;
    }

    .article-info {
        margin: 15px auto;

        span {
            margin-right: 10px;
        }
    }
}
</style>